<template>
  <Transition mode="out-in" appear>
    <div v-if="ok" class="common">重庆</div>
    <div v-else class="common">成都</div>
  </Transition>
  <button @click="switchCity">切换</button>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const ok = ref(true)
const switchCity = () => {
  ok.value = !ok.value
}
</script>
<style scoped>
.common {
  display: inline-block;
}

.v-enter-active,
.v-leave-active {
  transform: scale(1);
  transition: all .3s;
}

.v-enter-from,
.v-leave-to {
  transform: scale(0)
}
</style>
